<template>
  <el-select
    v-bind="$attrs"
    v-on="$listeners"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
  >
    <el-option v-for="item in options" :key="item.key" :label="item.value" :value="item.key"></el-option>
  </el-select>
</template>

<script>
import { listKv } from "@/api/role";
export default {
  inheritAttrs: false,
  data() {
    return {
      options: [
        {
          key: "0",
          value: "顶级"
        }
      ],
      loading: false
    };
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        listKv(query)
          .then(res => {
            this.loading = false;
            this.options = [
              {
                key: "0",
                value: "顶级"
              }
            ];
            this.options = this.options.concat(res.data);
          })
          .catch(err => {
            this.loading = false;
          });
      }
    }
  }
};
</script>